<template>
  <div class="app-container">
    <el-col :span="24" style="text-align: center; position: relative;">
      <el-date-picker v-model="pickDataList" type="datetimerange" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="showecharts()">
      </el-date-picker>
      <div class="downloadbtn">
        <el-button native-type="submit" type="primary" style="margin-left: 10px" @click="downexcel()">下载明细
        </el-button>
      </div>
    </el-col>
    <el-col :span="24" v-loading="loading" style="height:206px;margin-bottom:15px" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
      <el-col :span="24" style="margin-top: 30px;" v-if="static_list.length > 1">
        <div class="tablelist" style="border: none;">
          <li>
            &nbsp;
          </li>
          <li>
            机器总数
          </li>
          <li>
            有异常订单机器
          </li>
          <li>
            异常机器百分比
          </li>
          <li>
            订单总数
          </li>
          <li>
            异常订单总数
          </li>
          <li>
            异常订单百分比
          </li>
          <li>
            无法解析数据
          </li>
          <li>
            无响应
          </li>
          <li>
            转动超正常值
          </li>
          <li>
            转动时间0秒
          </li>
        </div>
        <div class="tablelist">
          <li style="text-align: left;">
            {{static_list[0].group_name}}
          </li>
          <li>
            {{static_list[0].mch_count}}
          </li>
          <li>
            {{static_list[0].error_mch_count}}
          </li>
          <li>
            {{static_list[0].error_mch_percentage_str}}
          </li>
          <li>
            {{static_list[0].order_count}}
          </li>
          <li>
            {{static_list[0].error_order_count}}
          </li>
          <li>
            {{static_list[0].error_order_percentage_str}}
          </li>
          <li>
            {{static_list[0].error_order_parse_error}}
          </li>
          <li>
            {{static_list[0].error_order_no_response}}
          </li>
          <li>
            {{static_list[0].error_order_rotation_time_error}}
          </li>
          <li>
            {{static_list[0].error_order_rotation_time_0s}}
          </li>
        </div>
        <div class="tablelist">
          <li style="text-align: left;">
            {{static_list[1].group_name}}
          </li>
          <li>
            {{static_list[1].mch_count}}
          </li>
          <li>
            {{static_list[1].error_mch_count}}
          </li>
          <li>
            {{static_list[1].error_mch_percentage_str}}
          </li>
          <li>
            {{static_list[1].order_count}}
          </li>
          <li>
            {{static_list[1].error_order_count}}
          </li>
          <li>
            {{static_list[1].error_order_percentage_str}}
          </li>
          <li>
            {{static_list[1].error_order_parse_error}}
          </li>
          <li>
            {{static_list[1].error_order_no_response}}
          </li>
          <li>
            {{static_list[1].error_order_rotation_time_error}}
          </li>
          <li>
            {{static_list[1].error_order_rotation_time_0s}}
          </li>
        </div>
        <div class="tablelist">
          <li style="text-align: left;">
            {{static_list[2].group_name}}
          </li>
          <li>
            {{static_list[2].mch_count}}
          </li>
          <li>
            {{static_list[2].error_mch_count}}
          </li>
          <li>
            {{static_list[2].error_mch_percentage_str}}
          </li>
          <li>
            {{static_list[2].order_count}}
          </li>
          <li>
            {{static_list[2].error_order_count}}
          </li>
          <li>
            {{static_list[2].error_order_percentage_str}}
          </li>
          <li>
            {{static_list[2].error_order_parse_error}}
          </li>
          <li>
            {{static_list[2].error_order_no_response}}
          </li>
          <li>
            {{static_list[2].error_order_rotation_time_error}}
          </li>
          <li>
            {{static_list[2].error_order_rotation_time_0s}}
          </li>
        </div>
        <div class="tablelist">
          <li style="text-align: left;">
            {{static_list[3].group_name}}
          </li>
          <li>
            {{static_list[3].mch_count}}
          </li>
          <li>
            {{static_list[3].error_mch_count}}
          </li>
          <li>
            {{static_list[3].error_mch_percentage_str}}
          </li>
          <li>
            {{static_list[3].order_count}}
          </li>
          <li>
            {{static_list[3].error_order_count}}
          </li>
          <li>
            {{static_list[3].error_order_percentage_str}}
          </li>
          <li>
            {{static_list[3].error_order_parse_error}}
          </li>
          <li>
            {{static_list[3].error_order_no_response}}
          </li>
          <li>
            {{static_list[3].error_order_rotation_time_error}}
          </li>
          <li>
            {{static_list[3].error_order_rotation_time_0s}}
          </li>
        </div>
      </el-col>
    </el-col>
    <el-col :span="24" style="margin-top: 30px;text-align: right;">
      <el-radio-group v-model="radio1" @change="selecttype">
        <el-radio-button label="0">全部</el-radio-button>
        <el-radio-button label="1">有屏-8寸</el-radio-button>
        <el-radio-button label="2">有屏-微信刷脸</el-radio-button>
        <el-radio-button label="3">有屏-其它</el-radio-button>
        <el-radio-button label="4">无屏</el-radio-button>
      </el-radio-group>
    </el-col>
    <el-col :span="24" style="height:250px;" v-loading="loading2" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
      <div id='line1' style="width: 100%;height:250px; margin:0 auto;"></div>
    </el-col>
    <el-col :span="24" style="height:250px;margin-top: 10px;" v-loading="loading3" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
      <div id='line2' style="width: 100%;height:250px; margin:0 auto;"></div>
    </el-col>
  </div>
</template>
<script>
  import Cookies from "js-cookie";
  export default {
    data() {
      return {
        pickDataList: null, //el-date-picker v-model的值
        pickDate: '', // 存放getPickDate获取的数据
        pickerOptions: {
          onPick: this.getPickDate,
          disabledDate: this.disabledDate
        },
        radio1: "0",
        static_list: [],
        echart_data1: [],
        echart_data2: [],
        loading: true,
        loading2: true,
        loading3: true,
      }
    },
    mounted() {
      this.getechartdata(0)
      this.getechartdata(1)
      // this.initecharts()
      // this.initecharts2()
      this.get_static_list()
    },
    created() {

    },
    methods: {
      getPickDate(pick) {
        this.pickDate = pick;
      },
      disabledDate(date) {
        const { minDate, maxDate } = this.pickDate;
        if (minDate && !maxDate) {
          const diff = Math.abs(minDate.valueOf() - date.valueOf());
          if (diff > 1000 * 3600 * 24 * 30) {
            return true;
          }
        }
      },
      selecttype(value) {
        this.loading2 = true
        this.loading3 = true
        this.getechartdata(0)
        this.getechartdata(1)
      },
      get_static_list() {
        let param
        console.log(this.pickDataList)
        if (this.pickDataList != null) {
          param = {
            time_start: this.pickDataList[0],
            time_end: this.pickDataList[1],
          }
        }
        else
        {
          param = {
            time_start: '',
            time_end: '',
          }
        }
        this.$post(this.$api + '/mch_order_error/order_error_statistics', param).then((e) => {
          if (e.code == 0) {
            this.static_list = e.data
          }
          else
          {
            this.$notify({
              title: '失败',
              message: e.msg,
              type: 'error'
            });
          }
          this.loading = false
        })
      },
      showecharts() {
        this.loading = true
        this.get_static_list()
      },
      getechartdata(type) {
        let param = {
          statistics_group: this.radio1,
          weekly_type: type,
        }
        this.$get(this.$api + '/mch_order_error/order_error_weekly_statistics', param).then((e) => {
          if (e.code == 0) {
            if (type == 0) {
              this.echart_data1 = e.data
              this.initecharts()
            }
            else
            {
              this.echart_data2 = e.data
              this.initecharts2()
            }
          }
          else
          {
            this.$notify({
              title: '失败',
              message: e.msg,
              type: 'error'
            });
          }
        })
      },
      initecharts() {
        const line2Chart = this.$echarts.init(document.getElementById('line1'));
        line2Chart.clear();
        line2Chart.off('click') // 如果不加off事件，就会叠加触发
        line2Chart.showLoading({
          text: '正在努力的读取数据中...'
        });
        const labelOption = {
          show: true,
          position: 'insideBottom',
          distance: 15,
          align: 'left',
          verticalAlign: 'middle',
          rotate: 90,
          formatter: '{c}  {name|{a}}',
          fontSize: 16,
          rich: {
            name: {}
          },
          color: '#000',
        };
        for (var i = 0; i < this.echart_data1.series_data.length; i++) { //数据添加样式
          this.echart_data1.series_data[i].label = labelOption
        }
        const line2option = {
          title: {
            text: '本周单日异常订单',
            padding: [0, 0, 20, 0],
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            //与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
            top: "10%",
            left: "5%",
            right: "5%",
            bottom: "7%"
          },
          legend: {
            data: this.echart_data1.legend_data,
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: 'category',
            axisTick: { show: false },
            data: this.echart_data1.xAxis_data,
            height: 20,
          },
          yAxis: {
            type: 'value'
          },
          series: this.echart_data1.series_data
        };


        line2Chart.on('click', function (params) {
          console.log(params);
        })
        line2Chart.hideLoading()
        this.loading2 = false
        line2Chart.setOption(line2option);
      },
      initecharts2() {
        const line2Chart = this.$echarts.init(document.getElementById('line2'));
        line2Chart.clear();
        line2Chart.off('click') // 如果不加off事件，就会叠加触发
        line2Chart.showLoading({
          text: '正在努力的读取数据中...'
        });
        const labelOption = {
          show: true,
          position: 'insideBottom',
          distance: 15,
          align: 'left',
          verticalAlign: 'middle',
          rotate: 90,
          formatter: '{c}  {name|{a}}',
          fontSize: 16,
          rich: {
            name: {}
          },
          color: '#000',
        };
        for (var i = 0; i < this.echart_data2.series_data.length; i++) { //数据添加样式
          this.echart_data2.series_data[i].label = labelOption
        }

        const line2option = {
          title: {
            text: '上周单日异常订单',
            padding: [0, 0, 20, 0],
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            //与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
            top: "10%",
            left: "5%",
            right: "5%",
            bottom: "7%"
          },
          legend: {
            data: this.echart_data2.legend_data,
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: 'category',
            axisTick: { show: false },
            data: this.echart_data2.xAxis_data,
          },
          yAxis: {
            type: 'value'
          },
          series: this.echart_data2.series_data
        };


        line2Chart.on('click', function (params) {
          console.log(params);
        })
        line2Chart.hideLoading()
        this.loading3 = false
        line2Chart.setOption(line2option);
      },
      downexcel() {
        let param
        if (this.pickDataList != null) {
          param = {
            time_start:this.pickDataList[0],
            time_end:this.pickDataList[1]
          }
        }
        else
        {
          param = {
            time_start:'',
            time_end:'',
          }
        }
        this.$downloadpost(this.$api + '/mch_order_error/order_error_statistics_detail_excel', param, true)
        // var form = document.createElement("form");
        // form.action = this.$api + '/mch_order_error/order_error_statistics_detail_excel';
        // form.method = "post";
        // form.style.display = "none";
        // var opt = document.createElement("input");
        // opt.type = 'hidden';
        // opt.name = 'token';
        // opt.value = Cookies.get('crmtoken');
        // form.appendChild(opt);
        // if (this.pickDataList.length > 1) {
        //   var time_start = document.createElement("input");
        //   time_start.type = 'hidden';
        //   time_start.name = 'time_start';
        //   time_start.value = this.pickDataList[0];
        //   form.appendChild(time_start);

        //   var time_end = document.createElement("input");
        //   time_end.type = 'hidden';
        //   time_end.name = 'time_end';
        //   time_end.value = this.pickDataList[1];
        //   form.appendChild(time_end);
        // }
        // else
        // {
        //   var time_start = document.createElement("input");
        //   time_start.type = 'hidden';
        //   time_start.name = 'time_start';
        //   time_start.value = '';
        //   form.appendChild(time_start);

        //   var time_end = document.createElement("input");
        //   time_end.type = 'hidden';
        //   time_end.name = 'time_end';
        //   time_end.value = '';
        //   form.appendChild(time_end);
        // }
        // document.body.appendChild(form);
        // form.submit();
      }
    }
  }
</script>
<style scoped>
  .downloadbtn {
    width: 150px;
    position: absolute;
    right: 0px;
    top: 0px;
  }

  .tablelist {
    width: 100%;
    height: 37px;
    line-height: 37px;
    border-bottom: 1px solid #eee;
    color: #606266;
  }

  .tablelist li {
    width: 9%;
    float: left;
    text-align: center;
  }
</style>